<!--
 * @Author: your name
 * @Date: 2021-09-19 17:28:10
 * @LastEditTime: 2021-09-23 09:28:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-ui\src\views\Article.vue
-->
<template>
  <div class="container">
    <!-- 头部 -->
    <Header></Header>
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <div class="title">{{artData.title}}</div>
        <div class="detailMsg">
          <!-- 发布时间 -->
          <span>发布时间：{{artData.publishTime | fmtDate}}</span>
          <!-- 阅读次数 -->
          <span>阅读次数：{{artData.readTimes}} 次</span>
          <!-- 作者 -->
          <span>作者：{{artData.baseUser.realname}}</span>
        </div>
        <!-- 在vue中 加载html页面或者 富文本的数据 v-html -->
        <div class="artContent"
             v-html="artData.content"></div>
        <!-- <div class="artContent">{{artData.content}}</div> -->
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
import { get } from '../utils/request'
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
      artItem: {},
      artData: {}
    }
  },
  methods: {
    getArticleData () {
      get('/index/article/findById', { id: this.artItem.id }).then(res => {
        // console.log(res.data);
        this.artData = res.data
        // console.log(this.artItem.id);
      })
    }
  },
  created () {
    this.artItem = this.$route.query
    this.getArticleData()
  },
}
</script>

<style lang="scss" scoped>
.container {
  .content {
    .wrapper {
      background-color: rgba(255, 255, 255, 0.61);
      .title {
        font-weight: 900;
        font-size: 25px;
        display: flex;
        justify-content: center;
      }
      .detailMsg {
        display: flex;
        justify-content: center;
        span {
          margin: 20px;
        }
      }
    }
  }
}
</style>